<template>
  <div class="setHomePage">
    <div class="flex mb-10px">
      <el-button type="primary" @click="finish">修改</el-button>
      <!-- <el-button type="">取消</el-button> -->
    </div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="主内容展示" name="1">
        <div>
          <content
            :sortArray="horizontalArraySelect"
            :change-content="horizontalArray"
            tag-type="horizontal"
            ref="horizontal"
          /></div
      ></el-collapse-item>
      <el-collapse-item title="右侧展示" name="2">
        <div>
          <content
            :sortArray="verticalArraySelect"
            :change-content="verticalArray"
            tag-type="vertical"
            ref="vertical"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item title="顶部展示" name="3">
        <div>
          <content
            :sortArray="echartViewSelect"
            :change-content="echartViewArray"
            tag-type="echartView"
            ref="echartView"
          /></div
      ></el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
import { setHomesetting } from '@/api/system/user'
import { ElMessage } from 'element-plus'
import {
  echart_view_data,
  horizontal_data,
  vertical_data
} from '@/hooks/dict/contract'
const { proxy } = getCurrentInstance()
const userStore = useUserStore()

const activeName = ref(99)

// 左侧选择组件
const horizontalArray = ref([])
// 左侧选择组件
const horizontalArraySelect = ref([])
watch(
  horizontal_data,
  val => {
    if (val) {
      horizontalArray.value = val.map(v => {
        return {
          key: v.label,
          value: v.value,
          disabled: !!v.elTagClass
        }
      })
    }
  },
  { immediate: true, deep: true }
)

// 右侧选择组件
const verticalArray = ref([])
// 右侧选中组件
const verticalArraySelect = ref([])
watch(
  vertical_data,
  val => {
    if (val) {
      verticalArray.value = val.map(v => {
        return {
          key: v.label,
          value: v.value,
          disabled: !!v.elTagClass
        }
      })
    }
  },
  { immediate: true, deep: true }
)

// 顶部选择组件
const echartViewArray = ref([])
// 顶部选中组件
const echartViewSelect = ref([])

watch(
  echart_view_data,
  val => {
    if (val) {
      echartViewArray.value = val.map(v => {
        return {
          key: v.label,
          value: v.value,
          disabled: !!v.elTagClass
        }
      })
    }
  },
  { immediate: true, deep: true }
)

const userId = ref()
const homeSettings = ref()
function init() {
  userId.value = userStore.userInfo.userId
  if (userStore.homeSetting) {
    homeSettings.value = JSON.parse(userStore.homeSetting)
    const { horizontal, vertical, echartView } = homeSettings.value
    // 弹窗选中值
    horizontalArraySelect.value = horizontal
    verticalArraySelect.value = vertical
    echartViewSelect.value = echartView
    if (!horizontal.length && !vertical.length && !echartView.length) {
      // homeSettings存在,但选中组件是全为空数组
      homeSettings.value = {
        echartView: [
          { key: '待处理工单', value: 'PendingWork' },
          { key: '待处理任务', value: 'PendingTask' },
          { key: '待阅读公告', value: 'PendingNotice' },
          { key: '待审批流程', value: 'PendingProcess' },
          { key: '预留', value: 'pendingTest' }
        ],
        horizontal: [
          { key: '待办事宜', value: 'ToDoList' },
          { key: '通知公告', value: 'Notice' }
        ],
        vertical: [{ key: '销售排名', value: 'SalesRanking' }]
      }
    }
  } else {
    // 默认选中值
    horizontalArraySelect.value = [
      { key: '待办事宜', value: 'ToDoList' },
      { key: '通知公告', value: 'Notice' }
    ]
    verticalArraySelect.value = [{ key: '销售排名', value: 'SalesRanking' }]
    echartViewSelect.value = [
      { key: '待处理工单', value: 'PendingWork' },
      { key: '待处理任务', value: 'PendingTask' },
      { key: '待阅读公告', value: 'PendingNotice' },
      { key: '待审批流程', value: 'PendingProcess' },
      { key: '预留', value: 'pendingTest' }
    ]
  }
}
init()

async function finish() {
  if (proxy.$refs.echartView.exposeSort().length > 5) {
    proxy.$modal.msgWarning('顶部展示模块最多选中五个组件，请重新选择')
    return
  }
  let homeSetting
  proxy.$modal.confirm('请确认您当前进行的修改操作').then(() => {
    homeSetting = JSON.stringify({
      horizontal: proxy.$refs.horizontal.exposeSort().length
        ? proxy.$refs.horizontal.exposeSort()
        : [],
      vertical: proxy.$refs.vertical.exposeSort().length
        ? proxy.$refs.vertical.exposeSort()
        : [],
      echartView: proxy.$refs.echartView.exposeSort().length
        ? proxy.$refs.echartView.exposeSort()
        : []
    })
    setHomesetting({
      userId: userId.value,
      homeSetting
    }).then(res => {
      ElMessage({
        showClose: true,
        message: '修改成功，请返回首页刷新查看',
        type: 'success'
      })
      homeSettings.value = JSON.parse(homeSetting)
    })
  })
}

function reduction() {
  const { horizontal, vertical, echartView } = homeSettings.value
  // 弹窗选中值
  horizontalArraySelect.value = horizontal
  verticalArraySelect.value = vertical
  echartViewSelect.value = echartView
}
</script>

<style scoped lang="scss">
.setHomePage {
  .box {
    @apply px-40px mb-20px;
    h2 {
      @apply mt-0;
    }
  }
}
</style>
